<template>
  <div class="p-6 space-y-6">
    <h1 class="text-2xl font-bold text-gray-800">个人中心</h1>

    <div class="bg-white rounded shadow p-4">
      <div class="grid md:grid-cols-2 gap-4">
        <div>
          <div class="text-sm text-gray-500">姓名</div>
          <div class="text-lg text-gray-800">{{ me?.name || '-' }}</div>
        </div>
        <div>
          <div class="text-sm text-gray-500">邮箱</div>
          <div class="text-lg text-gray-800">{{ me?.email || '-' }}</div>
        </div>
      </div>
    </div>

    <div class="bg-white rounded shadow p-4">
      <h2 class="font-semibold mb-3 text-gray-800">主题</h2>
      <div class="flex items-center gap-3">
        <label class="text-sm text-gray-600">界面主题</label>
        <select class="border rounded px-3 py-2" v-model="theme.current" @change="onThemeChange">
          <option v-for="t in theme.themes" :key="t.id" :value="t.id">{{ t.name }}</option>
        </select>
      </div>
    </div>

    <div class="bg-white rounded shadow p-4">
      <h2 class="font-semibold mb-3 text-gray-800">安全</h2>
      <button class="px-4 py-2 border rounded text-red-600 hover:bg-red-50" @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { useThemeStore } from '../stores/theme'

const auth = useAuthStore()
const router = useRouter()
const me = computed(() => auth.user)
const theme = useThemeStore()

onMounted(async () => {
  if (!auth.user && auth.token) {
    try { await auth.fetchMe() } catch {}
  }
})

const logout = () => { auth.clear(); router.replace({ name: 'login' }) }
const onThemeChange = () => theme.apply(theme.current)
</script>

<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css";
</style>
